<script setup>
  import { inject } from 'vue'
  import Button from '@/components/Button.vue'
  import BusinessNode from './BusinessNode.vue'

  import TaskNode from './TaskNode.vue'
  import FileList from '../list/FileList.vue'
  import FileListHeader from '../list/FileListHeader.vue'
  import { PROVIDE_KEY } from '../consts'
  const props = defineProps({
    projectTree: { type: Object, required: true },
    businessId: { type: Number, default: null },
    taskId: { type: Number, default: null },
  })
  const { onFileAdd } = inject(PROVIDE_KEY)
</script>
<template>
  <div class="content_vertical_padding separate_bottom_dashed">
    <div class="table_container">
      <table class="collapsible hover_table files">
        <FileListHeader />
        <tbody>
          <tr class="row_recap">
            <td colspan="6">
              <h4>Dossier : {{ projectTree.name }}</h4>
            </td>
            <td class="col_actions width_four">
              <Button
                :show-label="true"
                class="btn-primary"
                label="Fichier"
                icon="plus"
                title="Ajouter un fichier au dossier"
                @click="() => onFileAdd(projectTree)"
              />
            </td>
          </tr>

          <FileList :node="projectTree" :key="projectTree.id" />
        </tbody>
        <TaskNode
          :node="estimation"
          :level="1"
          v-for="estimation in projectTree.estimations"
          :open="!businessId || taskId === estimation.id"
          :key="estimation.id"
        />
        <TaskNode
          :open="!businessId || taskId == invoice.id"
          :node="invoice"
          v-for="invoice in projectTree.invoices"
          :key="invoice.id"
        />
        <BusinessNode
          :node="business"
          v-for="business in projectTree.businesses"
          :open="!businessId || business.id === businessId"
          :task-id="taskId"
          :key="business.id"
        />
      </table>
    </div>
  </div>
</template>
